<template>
  <div class="app-container">
    <div v-if="user">
      <el-row :gutter="20">

        <el-col :span="6" :xs="24">
          <user-card :user="user" />
        </el-col>

        <el-col :span="18" :xs="24">
          <el-card>
            <el-tabs v-model="activeTab">
              <el-tab-pane label="基础信息" name="account">
                <account :user="user" />
              </el-tab-pane>
              <el-tab-pane label="修改密码" name="change">
                <ChangePassword :form="ruleFormPassword" :rules="passwordRules" />
              </el-tab-pane>
              <el-tab-pane label="Activity" name="activity">
                <activity />
              </el-tab-pane>
              <el-tab-pane label="Timeline" name="timeline">
                <timeline />
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>

      </el-row>
    </div>
  </div>
</template>

<script>
import { getBaseInfo } from '@/api/user'
import UserCard from './components/UserCard'
import Activity from './components/Activity'
import Timeline from './components/Timeline'
import Account from './components/Account'
import ChangePassword from './components/ChangePassword'

export default {
  name: 'SysUserCenter',
  components: { UserCard, Activity, Timeline, Account, ChangePassword },
  data() {
    return {
      user: {
        name: '',
        email: '',
        avatar: '',
        role: ''
      },
      activeTab: 'account',
      ruleFormPassword: {
        passwordOld: '',
        passwordNew: '',
        passwordNew2: ''
      },
      passwordRules: {
        passwordOld: [{ required: true, message: '当前密码不能为空', trigger: 'blur' }],
        passwordNew: [{ required: true, message: '新密码不能为空', trigger: 'blur' }],
        passwordNew2: [{ required: true, message: '新密码不能为空', trigger: 'blur' }, { validator: this.validatePassword, trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getUser()
  },
  methods: {
    validatePassword(rule, value, callback) {
      if (this.ruleFormPassword.passwordNew2 !== this.ruleFormPassword.passwordNew) {
        callback(new Error('两次密码不一致！'))
      } else {
        callback()
      }
    },
    async getUser() {
      const res = await getBaseInfo()
      this.user = res.result ?? {}
      if (this.user.avatar) {
        this.user.avatar = process.env.VUE_APP_BASE_API + this.user.avatar
      }
      if (this.user.signature) {
        this.user.signature = process.env.VUE_APP_BASE_API + this.user.signature
      }
    }
  }
}
</script>
